<template>
  <div class="trends-chart-container">
    <div class="chart-header">
      <div class="chart-title">Engagement types over time</div>

      <div class="chart-right">
        <div class="filter-controls">
          <div class="metric-label positive">Positive</div>
          <div class="metric-label neutral">Neutral</div>
          <div class="metric-label negative">Negative</div>
        </div>
        <div class="period-toggle">
          <el-checkbox
            v-model="showHistory"
            @change="handlePeriodChange(checkedCities)"
            >Previous Period</el-checkbox
          >
        </div>
        <div class="trends-chart__refresh-container">
          <el-dropdown class="trends-chart__refresh-dropdown" trigger="click">
            <!-- 触发图标 -->
            <img
              src="@/assets/fresh.png"
              alt="Refresh"
              class="trends-chart__refresh-icon"
            />

            <!-- 多选菜单 -->
            <el-dropdown-menu
              slot="dropdown"
              class="trends-chart__multi-select"
            >
              <el-checkbox-group
                style="display: flex; flex-direction: column; padding: 0 5px"
                v-model="selectedServices"
                @change="handleServiceSelectionChange"
              >
                <el-checkbox
                  v-for="service in serviceOptions"
                  :label="service.value"
                  :key="service.label"
                  >{{ service.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="chart-area">
      <PieChart :option="optionLineGraph" :height="'350px'"></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";

export default {
  components: {
    PieChart,
  },
  data() {
    return {
      selectedServices: [], // 存储选中的服务值
      showHistory: false, // 初始不显示历史数据

      previousPeriodData: [
        {
          name: "Positive (Previous)",
          type: "line",
          symbol: "none",
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            color: "#0C3B7C",
            width: 1,
            type: "dashed",
            dash: [8, 4],
          },
          data: [5, 10, 8, 12, 10, 15, 12, 10, 8, 12, 10, 5],
        },
        {
          name: "Neutral (Previous)",
          type: "line",
          symbol: "none",
          yAxisIndex: 0,
          smooth: true,
          lineStyle: {
            color: "#FF0000",
            width: 1,
            type: "dashed",
            dash: [8, 4],
          },
          data: [1, 20, 3, 18, 2, 19, 1, 20, 4, 17, 2, 19],
        },
        {
          name: "Negative (Previous)",
          type: "line",
          symbol: "none",
          yAxisIndex: 0,
          smooth: true,
          lineStyle: {
            color: "#FDDF1D",
            width: 1,
            type: "dashed",
            dash: [8, 4],
          },
          data: [5, 1, 15, 20, 3, 1, 18, 2, 16, 20, 4, 1],
        },
      ],
      // 新增：下拉菜单的多选数据
      serviceOptions: [
        { label: "Booking", value: "Booking" },
        { label: "Checkin", value: "Checkin" },
        { label: "Cleanness", value: "Cleanness" },
        { label: "Service", value: "Service" },
        { label: "Room", value: "Room" },
        { label: "Facilities", value: "Facilities" },
        { label: "F&B", value: "F&B" },
        { label: "Checkout", value: "CheckoutB" },
        { label: "Post saty", value: "Post saty" },
      ],
        currentSeries: [
          {
            name: "Positive",
            symbol: "none",
            smooth: true,
            symbolSize: 18,
            type: "line",
            data: [12, 15, 8, 17, 9, 11, 14, 10, 16, 7, 13, 19],
            yAxisIndex: 0,
            lineStyle: { color: "#2FAA68", width: 3 },
            emphasis: { lineStyle: { width: 3 } },
          },
          {
            name: "Neutral",
            type: "line",
            smooth: true,
            symbol: "none",
            data: [5, 5, 7, 4, 4, 3, 3, 3, 5, 6, 7, 8],
            yAxisIndex: 0,
            lineStyle: { color: "#8F8F8F", width: 3 },
            emphasis: { lineStyle: { width: 3 } },
          },
          {
            name: "Negative",
            smooth: true,
            symbol: "none",
            type: "line",
            data: [5, 7, 9, 6, 8, 12, 15, 10, 7, 4, 9, 11],
            yAxisIndex: 0,
            lineStyle: { color: "#E51837", width: 3 },
            emphasis: { lineStyle: { width: 3 } },
          },
        ],
      timeSelect: "",
      checked: false,
      options: [
        {
          value: "1",
          label: "一月份",
        },
        {
          value: "2",
          label: "二月份",
        },
      ],
      optionLineGraph: {
        subtitle: {
          text: "by scores",
        },
        legend: {
          icon: "roundRect",
          left: "center",
          bottom: "0%",
          itemGap: 40,
          itemWidth: 30,
          itemHeight: 5,
          itemGap: 40,
          padding: [0, 0, 0, 10],
          data: [
            {
              name: "Positive",
              icon: "roundRect",
              itemStyle: { color: "#2FAA68" },
            },
            {
              name: "Neutral",
              icon: "roundRect",
              itemStyle: { color: "#8F8F8F" },
            },
            {
              name: "Negative",
              icon: "roundRect",
              itemStyle: { color: "#E51837" },
            },
          ],
          textStyle: {
            color: "inherit", // 继承 itemStyle 的颜色
            margin: 10,
            padding: [0, 5, 0, 5],
          },
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          right: "1%",
          bottom: "14%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "June",
            "July",
            "Aug",
            "Sept",
            "Oct",
            "Nov",
            "Dec",
          ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
            alignWithLabel: true, // 使刻度线与标签对齐
          },
          axisLabel: {
            margin: 20, // 关键：增加标签与 Y 轴的间距（原值可能为 0 或较小）
            color: "#6a6969",
            fontSize: 12,
          },
        },
        yAxis: [
          {
            type: "value", // 数值轴（用于连续数据）
            axisTick: {
              inside: true, // 刻度线朝内（朝向图表区域）
              interval: 10, // 刻度线间隔（此处可能无效，因 min/max/interval 已定义）
            },
            axisLabel: {
              align: "right",
              margin: 47, // 调整标签与轴线间距
              color: "#6a6969",
              fontSize: 14,
              fontWeight: "400",
              formatter: function (value) {
                return `${value}k`; // 直接显示数值，如需单位可改为 `${value}k`
              },
            },
            name: "by # of engagements", // 坐标轴名称
            nameGap: 20, // 名称与轴线的距离（单位：像素）
            min: 0, // 坐标轴最小值
            max: 20, // 坐标轴最大值
            interval: 2, // 刻度间隔（相邻刻度的差值）
            position: "left", // 坐标轴位置：左侧
            splitLine: {
              show: false, // 不显示网格线
            },
            nameTextStyle: {
              fontSize: 14, // 名称文字大小
              fontWeight: 400, // 文字粗细
              color: "#6a6969", // 临时设置为红色，方便排查
              // align: "right", // 旋转后文字的水平对齐：右对齐（文字右侧贴近轴线）
            },
          },
        ],

        series: [
          {
            name: "Positive",
            symbol: "none",
            smooth: true,
            symbolSize: 18,
            type: "line",
            data: [12, 15, 8, 17, 9, 11, 14, 10, 16, 7, 13, 19],
            yAxisIndex: 0,
            lineStyle: {
              color: "#2FAA68", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
          {
            name: "Neutral",
            type: "line",
            smooth: true,
            symbol: "none",
            data: [5, 5, 7, 4, 4, 3, 3, 3, 5, 6, 7, 8], // 模拟数据
            yAxisIndex: 0,
            lineStyle: {
              color: "#8F8F8F", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
          {
            name: "Negative",
            smooth: true,
            symbol: "none",
            type: "line",
            data: [5, 7, 9, 6, 8, 12, 15, 10, 7, 4, 9, 11],
            yAxisIndex: 0,
            lineStyle: {
              color: "#E51837", // 使用与图例一致的颜色
              width: 3,
            },
            emphasis: {
              lineStyle: {
                width: 3,
              },
            },
          },
        ],
      },
    };
  },
  watch: {
    // 监听showHistory变化，更新图表
    showHistory() {
      this.updateChartSeries();
    },
  },
  mounted() {
    this.updateChartSeries(); // 初始化时加载当前数据
    console.log(this.timeSelect, "这是值");
  },
  methods: {
    updateChartSeries() {
      this.optionLineGraph.series = this.showHistory
        ? [...this.currentSeries, ...this.previousPeriodData]
        : [...this.currentSeries];
    },

    // 处理周期切换
    handlePeriodChange() {
      this.updateChartSeries();
    },

    // 处理下拉菜单中的多选变化
    handleServiceSelectionChange(values) {
      console.log("选中的服务:", values);
      // 这里可以添加根据选中服务更新图表或其他逻辑
    },

    handlePlatformSelect(service) {
      console.log("选择的服务:", service);
      // 无需手动关闭菜单，Element UI自动处理
    },
    handleCheckedCitiesChange(checkedValues) {
      const avgOptions = checkedValues.filter(
        (option) => option !== "Previous Period"
      );
      const showHistory = checkedValues.includes("Previous Period");

      const originalSeriesNames = ["Positive", "Negative", "Neutral"];
      const originalSeries = this.chartOptions.series.filter((series) =>
        originalSeriesNames.includes(series.name)
      );
      const historySeries = showHistory ? [...this.previousPeriodData] : [];
      const visibleSeries = [...originalSeries, ...historySeries];

      this.chartOptions = {
        ...this.chartOptions,
        series: visibleSeries,
      };

      console.log("预期的系列数量:", visibleSeries.length);
    },
  },
};
</script>
<style scoped lang="scss">
.trends-chart-container {
  background: #ffffff;
  border: 1px solid #cdcccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
  padding: 16px 42px;

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-bottom: 24px;

    .chart-title {
      font-size: 18px;
      font-weight: 600;
      color: #454545;
    }

    .chart-right {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .filter-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin: 20px;
      .metric-label {
        padding: 8px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        white-space: nowrap;
      }

      .positive {
        padding: 8px;
        background: #2faa68;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        border-radius: 8px;
        text-align: center;
        // margin-right: 13px;
      }
      .neutral {
        padding: 8px;
        color: #8f8f8f;
        font-size: 12px;
        font-weight: 400;
        border: 1px solid #8f8f8f;
        border-radius: 8px;
        // margin-right: 13px;
      }
      .negative {
        padding: 8px;
        color: #e51837;
        font-size: 12px;
        font-weight: 400;
        border: 1px solid #e51837;
        border-radius: 8px;
      }
    }

    .period-toggle .el-checkbox {
      font-size: 14px;
      margin-right: 20px;
      color: #232323;
    }
  }

  .chart-area {
    width: 100%;
    min-height: 300px;
  }
}
</style>
